<template>
  <div id="div">
    <div class="content-header common-search-border1" style="margin: 10px">
      <el-button type="primary" class="butAdd" @click="handleCreate">
        新增用户
      </el-button>
    </div>

    <div class="app-container">
      <div class="box common-search-border2">
        <div class="filter-container">
          <!-- TODO: 搜索栏 -->
          <!--
                        :inline="true	行内表单模式 (表单项横向排列)
                        :model="queryParams"  数据绑定
                        ref="queryParams" 用于找到本表单使用
                    -->
          <el-form
            :inline="true"
            :model="queryParams"
            ref="queryParams"
            class="formInfo"
          >
            <el-form-item label="用户名称" label-width="80px">
              <el-input
                placeholder="请输入"
                v-model="queryParams.username"
                style="width: 200px"
                class="filter-item"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleRest">清除</el-button>
              <el-button type="primary" class="butOK" @click="handleSearch"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="box common-table-border" style="margin: 8px 0 0">
        <!--
                    TODO: 用户列表
                -->
        <!--
                    data	显示的数据
                    fit	列的宽度是否自撑开
                -->
        <el-table :data="userList" fit style="width: 100%">
          <el-table-column label="编号" width="50px" align="center" prop="id">
          </el-table-column>
          <el-table-column label="用户名" align="center" prop="username">
          </el-table-column>
          <el-table-column label="邮箱" align="center" prop="email">
          </el-table-column>
          <el-table-column label="创建日期" align="center" prop="createTime">
          </el-table-column>
          <el-table-column label="修改日期" align="center" prop="updateTime">
          </el-table-column>

          <el-table-column label="角色" width="120" align="center">
            <!--
                           slot-scope = "scope"
                               用于指定当前的数据(本案例是userList中的当前行元素)
                       -->
            <template slot-scope="scope">
              <!--
                                悬浮提示信息展示框
                                    trigger = "hover" 鼠标移上去触发
                                    placement="left" 悬浮框显示位置在左边

                            -->
              <el-popover
                v-for="role in scope.row.roles"
                trigger="hover"
                placement="left"
                :key="role.id"
              >
                <!-- 前两个p标签是提示信息, div标签是展示信息 -->
                <p style="font-size: 10px; color: blue">
                  角色编号: {{ role.id }}
                </p>
                <p style="font-size: 10px; color: blue">
                  角色描述: {{ role.description }}
                </p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ role.name }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <!--
                                 TODO: 修改和删除
                                 v-if 判断如果是admin用户就不要出现修改和删除按钮
                             -->
              <div class="operation" v-if="scope.row.username != 'admin'">
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleUpdate(scope.row)"
                  >修改
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDeleted(scope.row)"
                >
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!--
                     TODO: 分页组件
                       @size-change： 当改变每页条数时触发的函数
                       @current-change：当改变页码时触发的函数
                       current-page ：默认的页码
                       :page-sizes：每页条数选择框中显示的值
                       :page-size : 默认的每页条数
                       layout： 分页组件的布局
                           total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
                       :total: 总条数
                 -->
        <div class="pagination-container">
          <el-pagination
            class="pagiantion"
            v-show="this.total > 0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total"
          >
          </el-pagination>
        </div>
      </div>
      <!--TODO: 新增用户弹层
                   :visible.sync 是否显示 (dialogFormVisible=true 显示, =false隐藏)
            -->
      <el-dialog
        title="新增用户"
        align="left"
        :visible.sync="dialogFormVisible"
        width="40%"
        top="8vh"
      >
        <!--
                    model	表单数据对象
                    rules	表单验证规则
                -->
        <el-form label-width="120px" :model="addUser" :rules="rules" ref="form">
          <!--
                    prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
                    -->
          <el-form-item label="用户名称：" prop="username">
            <!-- v-model 双向数据绑定  autocomplete=off 取消自动补全功能-->
            <el-input v-model="addUser.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" prop="email">
            <el-input v-model="addUser.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input
              type="password"
              v-model="addUser.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!--
                        TODO: 动态获取角色
                    -->
          <el-form-item label="角色: " prop="roles">
            <!--
                         value / v-model	绑定值 (双向数据绑定)
                            multiple	是否多选
                            注意: 这是多选组件, addUser.roleIds是数组!!!
                        -->
            <el-select
              v-model="addUser.roles"
              
              value-key="id"
              multiple
              placeholder="请选择至少一个角色"
            >
              <!--
                                上面那里必须加个value-key， 值为下面role中的某个唯一属性。否则只能全选或全不选（其实只是显示上的“全选”）

                                v-for : 遍历, roleList是被遍历的数组
                                value	选项的值	string/number/object
                                label	选项的标签，若不设置则默认与 value 相同 (显示出来的标签名)
                                key     文档中没有说明, 就是取值跟value相同,删除也不影响本组件使用
                            -->
              <el-option
                v-for="role in roleList"
                :key="role.id"
                :label="role.name"
                :value="role"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="备注：" prop="remark">
            <el-input v-model="addUser.remark" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleCreateCancel">取 消</el-button>
          <el-button type="primary" @click="handleCreateConfirm"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- end -->
      <!-- 修改用户弹层 -->
      <el-dialog
        title="修改用户"
        align="left"
        :visible.sync="dialogUptFormVisible"
        width="40%"
        top="8vh"
      >
        <el-form
          label-width="120px"
          :model="updateUser"
          :rules="rules"
          ref="uptForm"
        >
          <el-form-item label="用户名称：" prop="username">
            <el-input
              v-model="updateUser.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" prop="email">
            <el-input v-model="updateUser.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input
              type="password"
              v-model="updateUser.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="角色: " prop="roles">
            <el-select
              v-model="updateUser.roles"
              multiple
              placeholder="请选择至少一个角色"
               value-key="id"
            >
              <el-option
                v-for="role in roleList"
                :key="role.id"
                :label="role.name"
                :value="role"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleUpdateCancel">取 消</el-button>
          <el-button type="primary" @click="handleUpdateConfirm"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- end -->
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
        total: 0,  //总条数
      pagination: {
        //total: 0,  //总条数
        currentPage: 1, // //当前页
        pageSize: 5, //每页显示条数
        queryParams:{}
      },
      userList: [], //用户列表数据
      roleList: [], // 角色列表数据
      queryParams: {
        // 搜索条件，这里可以做成多条件搜索
        username: "",
      },
      msg:"",//条件查询时搜索结果显示信息，因为需要在点击搜索时显示，翻页不显示

      dialogFormVisible: false, // 添加窗口显示状态
      dialogUptFormVisible: false, //修改窗口显示状态
      addUser: {
        // 用户数据
        username: "",
        email: "",
        password: "",
        remark: "",
        roles: [],
      },
      updateUser: {
        //用户的修改数据
        id: "",
        username: "",
        email: "",
        password: "",
        roles: [],
      },
      rules: {
        //校验规则
        username: [{ required: true, message: "请填写", trigger: "blur" }],
        email: [
          { required: true, message: "请填写", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        password: [{ required: true, message: "请填写", trigger: "blur" }],
      },
    };
  },
  created() {
    //分页查询用户列表
    this.getUserList();
    //查询所有的角色 TODO ?
    //  (添加用户和修改用户的时候要展示所有角色以供选择)
    this.getRoleList();
  },
  methods: {
    //TODO: 获取用户分页数据
    getUserList() {
      let url = "user/FindAllUsers";
      this.pagination.queryParams=this.queryParams
      let param = this.pagination;
      axios.post(url, param).then((response) => {
        //this.$message.info(response.data.msg)
        //当前页为1的时候（未翻页时），显示搜索结果条数信息，翻页不显示
        if(this.pagination.currentPage==1){
          this.$message.info(response.data.msg)
        }
        this.msg = response.data.msg;
        this.userList = response.data.data.rows;
        this.total = response.data.data.total;
      });
      // TODO: 以下是伪数据(用作参考,真实数据需要从服务器获取)
      // let response = {
      //     data:{
      //         "flag": true,
      //         "message": "获取用户列表成功",
      //         "result": {
      //             "rows": [
      //                 {
      //                     "createTime": "2020-05-20 00:00:00.0",
      //                     "updateTime": "2020-05-20 00:00:00.0",
      //                     "id": 1,
      //                     "username": "zs",
      //                     "password": "123",
      //                     "remark" : "管理员",
      //                     "email" : "zs@itcast.cn",
      //                     "roles" : [
      //                             {
      //                                 "id": "1",
      //                                 "name": "A管理员",
      //                                 "description" : "A模块的管理员"
      //                             },
      //                             {
      //                                 "id": "3",
      //                                 "name": "B管理员",
      //                                 "description" : "B模块的管理员"
      //                             }
      //                     ]
      //                 },
      //                 {
      //                     "createTime": "2020-05-20 00:00:00.0",
      //                     "updateTime": "2020-05-20 00:00:00.0",
      //                     "id": 1,
      //                     "username": "zs",
      //                     "password": "123",
      //                     "remark" : "管理员",
      //                     "email" : "zs@itcast.cn",
      //                     "roles" : [
      //                         {
      //                             "id": "1",
      //                             "name": "A管理员",
      //                             "description" : "A模块的管理员"
      //                         },
      //                         {
      //                             "id": "3",
      //                             "name": "B管理员",
      //                             "description" : "B模块的管理员"
      //                         }
      //                     ]
      //                 }
      //             ],
      //             "total": 15
      //         }
      //     }
      // };
      // // // 指定总记录数
      // this.pagination.total = response.data.result.total;
      // // // 执行分页显示的数据
      // this.userList = response.data.result.rows;
    },
    //TODO: 查询角色表
    getRoleList() {
      let url = "role/findAllRolesName";
      let param = this.pagination;
      axios.post(url, param).then((response) => {
        this.roleList = response.data.data;
      });
      //以下是伪数据
      // let response = [
      //         {
      //             "id": "1",
      //             "name": "管理员"
      //         } ,
      //         {
      //             "id": "2",
      //             "name": "会员"
      //         },
      //         {
      //             "id": "3",
      //             "name": "游客"
      //         }
      //     ]

      // this.roleList = response
    },
    //将查询条件置空
    handleRest() {
      this.queryParams = {
        username: "",
      };
    },
    //搜索
    handleSearch() {
      //将当前页码设置为1
       this.pagination.currentPage = 1;
      // let url = "/user/findUserByLike";
      // let param = this.pagination;
      // //console.log(this.pagination);
      // //console.log(this.queryParams);
      // this.pagination.queryParams=this.queryParams
      // //console.log(this.pagination);
      // axios.post(url,param).then(response=>{
      //     if(response.data.flag){
      //       this.userList = response.data.data.rows;
      //       this.total = response.data.data.total;
      //       this.$message.info(response.data.msg)
            
      //     }else{
      //       this.$message.info(response.data.msg)
      //     }
      // })
      this.getUserList();
      //this.$message.info(this.msg)
    },
    //每页数量改变的时候
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.pagination.currentPage = 1;
      this.getUserList();
    },
    //当前页码改变的时候
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.getUserList();
    },
    // 新增用户
    handleCreate() {
      if (this.$refs["form"]) {
        this.$refs["form"].resetFields();
      }
      this.dialogFormVisible = true;
    },
    //新增用户确定 TODO:
    handleCreateConfirm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
            let url = "/user/addUser"
            let param = this.addUser
            console.log(param);
            axios.post(url,param).then(response=>{
              console.log(response);
                if(response.data.flag){
                     this.$message.info(response.data.msg);
                }else{
                     this.$message.info(response.data.msg);
                }
            })
        }
      });
    },
    //新增用户取消
    handleCreateCancel() {
      this.dialogFormVisible = false;
    },
    //修改用户 数据回显
    handleUpdate(row) {
      var t = this;
      if (t.$refs["uptForm"]) {
        t.$refs["uptForm"].resetFields();
      }
      t.updateUser.id = row.id;
      t.updateUser.username = row.username;
      t.updateUser.password = row.password;
      t.updateUser.email = row.email;

      //遍历取出此用户所有的角色id
      let roleIds = [];
      for (let i = 0; i < row.roles.length; i++) {
        roleIds[i] = row.roles[i].id;
      }
      t.updateUser.roleIds = roleIds;

      t.dialogUptFormVisible = true;
    },
    //修改用户确定 TODO
    handleUpdateConfirm() {
      this.$refs["uptForm"].validate((valid) => {
        if (valid) {
          let url = "/user/updateUser"
          let param=this.updateUser
          axios.post(url,param).then(response=>{
            this.$message.info(response.data.msg);
          })

        }
      });
    },
    //修改用户取消
    handleUpdateCancel() {
      this.dialogUptFormVisible = false;
    },
    // 删除 TODO:
    handleDeleted(row) {
      //点击确认走then,点击取消走catch
      this.$confirm("此操作将永久删除用户 " + ", 是否继续?", "提示", {
        type: "warning",
      })
        //.then(() => {})
         .then(() => {
          console.log(row);
          let url="/user/deleteUserById"
          let param ="id="+row.id
          console.log(param);
          axios.post(url,param).then(response=>{
            this.$message.info(response.data.msg);
          })

          

         })


        .catch(() => {
          this.$message.info("已取消操作!");
        });
    },
  },
};
</script>
<style>
</style>